<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		ul,
		li {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		ul {
			width: 560px;
			border: 3px solid #eee;
			margin: 0 auto;
			/* display: none; */
		}

		li {
			width: 80px;
			height: 40px;
			background: #ccc;
			border: 1px solid #abc;
			float: left;
			margin: 5px;
			cursor: pointer;
		}

		.center {
			width: 280px;
			height: 30px;
			border: 1px solid #ccc;
			margin: 0 auto;
			text-align: center;
			line-height: 30px;
			color: #333;
		}

		ul button {
			width: 100px;
			height: 30px;
		}

		.active {
			font-size: 10px;
			text-align: center;
			line-height: 40px;
			font-family: '仿宋';
			font-weight: bold;
			color: #333;
			background: orange;
			border: 1px solid red;
		}


		/* 付款方样式 */
		.pay-box {
			width: 100%;
			height: 100%;
			background: #ccc;
			opacity: .9;
			position: absolute;
			left: 0;
			top: 0;
			display: none;
		}

		.pay {
			width: 200px;
			height: 280px;
			background-color: #eee;
			padding: 20px;
			margin: 0 auto;
			position: absolute;
			top: 100px;
			left: 630px;
		}

		.seat {
			color: darkolivegreen;
		}

		.price {
			color: darksalmon;
		}

		.pay button {
			width: 47px;
			height: 26px;
			margin: 30px 25px;
		}
	</style>
</head>

<body>
	<!-- 
		思路：
			1、先布局，给css添加样式
			2、获取结构的DOM元素
			3、选座的点击渲染
				// 逻辑：没有active类的时候，进行添加，同时对文本进行赋值；
				//反之，清空active类，同时 文本值为空
			4、支付窗===>利用遮罩层原理
			5、支付成功页面的跳转
	 -->
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>

		<p style="clear:both;"></p>
		<div class="center">屏幕中央</div>
		<button>购票</button>
	</ul>
	<div class="pay-box">
		<div class="pay">
			<p>商品：XXX电影</p>
			座位号：<span class="seat"></span><br>
			价格：<span class="price"></span>
			<p>内容：HTML、CSS、JS</p>
			<p>地址：深圳宝安区西部硅谷</p>
			<p>
				<button class="payNo">取消</button>
				<button class="payYes">支付</button>
			</p>
		</div>
	</div>
	<script>
		//获取DOM元素
		let lis = document.getElementsByTagName('li');
		let buyBtn = document.querySelector('ul>button');
		let payBox = document.querySelector('.pay-box');
		let payNo = document.querySelector('.payNo');
		let payYes = document.querySelector('.payYes');

		// 逻辑：没有active类的时候，进行添加，同时对文本进行赋值；
		//反之，清空active类，同时 文本值为空

		//遍历座位，当点击时加上active类;
		for (let i = 0; i < lis.length; i++) {
			lis[i].onclick = function () {
				//查lis属性名
				let res = this.getAttribute('class');
				//如果没有class类名，那就给他添加active
				if (!res) {
					this.setAttribute('class', 'active');
					this.innerText = (lis.length - i) + '座';
				}
				//如果有active类，那就为空
				else {
					this.setAttribute('class', '');
					this.innerText = '';
				}
			}
		}

		let price = document.querySelector('.price');
		let seat = document.querySelector('.seat');
		//点击购票事件
		buyBtn.onclick = () => {
			let active = document.querySelectorAll('.active');

			//打开遮罩层
			payBox.style.display = 'block';

			//获取座位信息，座位号
			let a = '';
			for (let i = 0; i < active.length; i++) {
				a += active[i].innerHTML + ' ';
			}
			//将选好座位信息 和 价格 进行赋值；
			seat.innerText = a;
			price.innerHTML = active.length * 50 + '元';
		}

		//取消支付事件返回选座
		payNo.onclick = function () {
			payBox.style.display = 'none';
		}
		//确认支付事件
		payYes.onclick = function () {
			let res = window.confirm('您确定要支付吗');
			if (res) {
				location.href = './succ.html';
			}
		}
	</script>
</body>

</html>